<template>
  <el-table :data="appObject.tableData" border style="width: 100%" v-loading="appObject.loading">
    <el-table-column prop="userName" label="姓名" />
    <el-table-column prop="dept" label="部门" />
    <el-table-column prop="email" label="邮箱" />
    <el-table-column prop="description" label="申请理由" />
    <el-table-column label="申请状态">
      <template #default="scope">
        <el-tag v-if="scope.row.status == 1">已同意</el-tag>
        <el-tag v-else-if="scope.row.status == 0" type="warning">申请中</el-tag>
        <el-tag v-else-if="scope.row.status == 2" type="danger">已拒绝</el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button v-if="scope.row.status == 0" size="small" type="default" @click="agreeApply(scope.$index, scope.row)">同意</el-button>
        <el-button v-if="scope.row.status == 0" size="small" type="danger" @click="rejectApply(scope.$index, scope.row)">拒绝</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 移除前弹出消息确认框 -->
  <!-- <el-dialog v-model="appObject.dialogVisible" title="移除" width="30%">
    <span>{{appObject.dialogTitle}}</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="appObject.dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleRemove()">确认</el-button>
      </span>
    </template>
  </el-dialog> -->
</template>

<script setup>
  import {
    reactive
  } from 'vue'
  import wgStore from '../store/wg.js'
  import {
    storeToRefs
  } from 'pinia'

  import {
    getWGUserById
  } from '../http/wgApi.js'
  
  import {
    getApply,
    updateApply
  } from '../http/applyApi.js'
  
  import userStore from '../store/user.js'
  
  const uStore = userStore()

  const appObject = reactive({
    tableData: [],
    dialogVisible: false,
    dialogTitle: '',
    removeUserId: 0,
    loading: false
  })
  
  const wStore = wgStore()
  const {
    wgId
  } = storeToRefs(wStore)
  
  const initData = () => {
    getApply(wStore.getWgId).then(res => {
      res = res.data
      appObject.tableData = res.data
    })
  }

  initData()
  
  
  const agreeApply = (index, row) => {
    row.status = 1
    updateApply(row).then(res => {
      initData()
    })
  }
  
  const rejectApply = (index, row) => {
    row.status = 2
    updateApply(row).then(res => {
      initData()
    })
  }
</script>

<style scoped>
</style>